serve-placeholder

♡ serve-placeholder

Connect/Express middleware to respond with better placeholders based on request instead of 404 page

Why?

💵 Rendering 404 errors is costly

• Each 404 error for assets means a new SSR request that adds extra loads to the server and increases crash chances.

👌 Graceful Responses

• Sometimes, we can send better responses alongside with 404 code instead of nothing. For example, for images, we send a fallback transparent 1x1 image.

🔍 SEO Friendly

• Don't allow indexing invalid URLs with ugly html pages.
• Remove extra SSR loads when assets like robots.txt or favicon.ico doesn't exist.

Usage

Install package:

npm install serve-placeholder

OR

yarn add serve-placeholder

Import and use middleware:

const placeholder = require('serve-placeholder')
// import placeholder from 'serve-placeholder'

// [regular middleware such as serve-static]

// Response with appreciate placeholders
app.use(placeholder())
//app.use(placeholder({ /* options */ }))

// [global error handler]

Options

handlers

A mapping from file extensions to the handler. Extensions should start with dot like .js.

You can disable any of the handlers by setting the value to null

If the value of a handler is set to false, middleware will be ignored for that extension.

statusCode

• Default: 404

Sets statusCode for all handled responses. Set to false to disable overriding statusCode.

skipUnknown

• Default: false

Skip middleware when no handler is defined for the current request.

Please note that if this option is set to true, then default handler will be disabled!

placeholders

• Type: Object

A mapping from handler to placeholder. Values can be String or Buffer. You can disable any of the placeholders by setting the value to false.

mimes

• Type: Object

A mapping from handler to the mime type. Mime type will be set as Content-Type header. You can disable sending any of the mimes by setting the value to false.

noCache

• Default: true

Set headers to prevent accidentally caching 404 resources.

When enabled, these headers will be sent:

{
  'cache-control': 'no-cache, no-store, must-revalidate',
  'expires': '0',
  'pragma': 'no-cache'
}

Defaults

These are default handlers. You can override every of them using provided options.

Handler	Extensions	Mime type	Placeholder
default	any unknown extension	-	-
css	.css	text/css	/* style not found */
html	.html, .htm	text/html	<!-- page not found -->
js	.js	application/javascript	/* script not found */
json	.json	application/json	{}
map	.map	application/json	[empty sourcemap v3 json]
plain	.txt, .text, .md	text/plain	[empty]
image	.png, .jpg, .jpeg, .gif, .svg, .webp, .bmp, .ico	image/gif	[transparent 1x1 image]

License

MIT. Made with 💖 by Nuxt.js team!

Changelog

1.2.4 (2021-07-12)

Bug Fixes

• do nothing if headers already sent (#48) (c633c71)